<template>
  <div class="main-container" style="padding-bottom: 44px">
    <div class="navContainer">
      <nav class="nav">
        <div
          class="left"
          :class="{ active: currentTag == 'new' }"
          @click="changeCurrentTag(0)"
        >
          <div class="top">最新</div>
          <div class="bottom"></div>
        </div>
        <div
          class="left"
          :class="{ active: currentTag != 'new' }"
          @click="changeCurrentTag(1)"
        >
          <div class="top">最热</div>
          <div class="bottom"></div>
        </div>
      </nav>
    </div>
    <scroller
      class="home-scroller"
      ref="scroller"
      :probe-type="3"
      @pullingUp="pullingUp"
    >
      <review-item
        :reviewMsgList="item"
        v-for="item in reviewList[currentTag].rows"
        :key="item.id"
        :isAddEvent="true"
      ></review-item>
    </scroller>
    <div class="goto-publish" @click="gotoPublish">
      <img src="https://qnhyd.laigl.com/52c64f92517ce9247eeb39039485dfdd.png" alt="" />
    </div>
    <main-tab-bar></main-tab-bar>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from "vue";
import {useRouter}from"vue-router";
import { Toast } from "vant";
import { request } from "/@/network/request.js";
import scroller from "../../components/commont/scroller/Scroller.vue";
import MainTabBar from "../../components/content/MainTabBar/MainTabBar.vue";
import ReviewItem from "/@/components/commont/reviewItem/reviewItem.vue";
export default {
  components: {
    MainTabBar,
    scroller,
    ReviewItem,
  },
  setup() {
    let noMoreData = ref(false)
    const router = useRouter();
    const currentTag = ref("new");
    // const isLove = ref(false);
    const scroller = ref(null);
    const page = reactive({
      hot: {
        page: 1,
      },
      new: {
        page: 1,
      },
    });
    let reviewList = reactive({
      hot: {
        rows: [],
      },
      new: {
        rows: [],
      },
    });
    const changeCurrentTag = (type) => {
      console.log(currentTag.value);
      page[currentTag.value].page = 1;
      reviewList[currentTag.value].rows = [];
      if (type === 0) {
        currentTag.value = "new";
      } else {
        currentTag.value = "hot";
      }

      getNewMessage(currentTag.value);
    };
    const getNewMessage = async (type) => {
      const res = await request({
        url: `v1.club/${type}`,
        data: {
          page: page[type].page,
          user_id:sessionStorage.getItem("user_id")
        },
      });
      
      scroller.value.finishPullUp();
      if (res.code === 200) {
        if(res.data.rows.length == 0){
          Toast("没有更多了");
          return
        }
        reviewList[type].rows.push(...res.data.rows);
        page[type].page += 1;
      } else {
        Toast({
          message: res.msg,
        });
      }
      
    };
    const getPostion = (position) => {
      //   console.log(scroller.value.refresh);
      //   position.y
    };
    const pullingUp = () => {
      getNewMessage(currentTag.value);
    };

    const gotoPublish = ()=>{
      router.push("/publish")
    }
    onMounted(() => {
      getNewMessage(currentTag.value);
    });
    return {
      currentTag,
      changeCurrentTag,
      // isLove,
      scroller,
      getPostion,
      pullingUp,
      reviewList,
      gotoPublish
    };
  },
};
</script>

<style  scoped>
.home-scroller {
  margin-top: 19.4vw;
  position: relative;
  z-index: 0;
  height: calc(100vh - 37.333vw);
  overflow: hidden;
}
.navContainer {
  width: 100%;
  position: fixed;
  z-index: 999999;
  transform: translateZ(2px);
  top:0;
  left: 0;
  right: 0;
  /* padding-top: 1px; */
   margin-top:-20px;
  padding-top:20px;
  background-color: #fff;
}
.nav {
  display: flex;
  width: 74.4vw;
  margin: 5.334vw auto 0 auto;
  height: 9.333vw;
}
.nav .left {
  margin-right: 6.933vw;
}
.nav {
  font-size: 4.4vw;
  color: #aeaeae;
}
.nav .left {
  line-height: 8.8vw;
}
.active {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 5.867vw;
  font-weight: 500;
  color: #000;
}
.active .bottom {
  width: 5.333vw;
  height: 1.333vw;
  background-color: #6e0802;
  border-radius: 0.667vw;
  margin: 0 auto;
}
.goto-publish {
  position: fixed;
  z-index: 999999;
  bottom: 14.533vw;
  transform: translateZ(2px);
  right: 0;
  width: 22.4vw;
  height: 22.4vw;
}
.goto-publish img {
  width: 22.4vw;
  height: 22.4vw;
  vertical-align: middle;
}
</style>